<template>
    <div>
        <el-dialog width="99%" fullscreen :close-on-click-modal="false" :title="'合并订单'" draggable v-model="state.visible"
            ref="dialogRef">
            <el-form label-width="140" label-suffix="：" :model="state.submitData" :rules="rules" ref="formRef">
                <div class="basic-info-head">基本信息</div>

                <el-row>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="入库仓">
                            {{ state.submitData.whNameTo }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="入库单号">
                            <Tc>
                                {{ state.submitData.inboundOrderCode }}
                            </Tc>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="入库类型">
                            {{ busTypeList[state.submitData.busType] }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="来源单号">
                            <Tc>
                                {{ state.submitData.sourceCode }}
                            </Tc>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="预计到货日期" prop="expectedInDate">
                            <el-date-picker v-model="state.submitData.expectedInDate" value-format="YYYY-MM-DD"
                                :shortcuts="[{
                                    text: '今天',
                                    value: () => {
                                        const today = new Date();
                                        return [today, today];
                                    },
                                },
                                {
                                    text: '昨天',
                                    value: () => {
                                        const yesterday = new Date();
                                        yesterday.setTime(yesterday.getTime() - 24 * 60 * 60 * 1000);
                                        return [yesterday, yesterday];
                                    },
                                }]" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="备注">
                            <el-input v-model="state.submitData.remark" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="basic-info-head">物流信息</div>

                <el-row>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="进口商编码/名称">
                            <el-input v-model="state.submitData.importerName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="头程运输方式">
                            <el-select clearable v-model="state.submitData.shippingMethodCode" placeholder="运输方式">
                                <el-option v-for="item in state.tranList" :key="item.id" :label="item.description"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="跟踪号">
                            <el-input v-model="state.submitData.logisticsTraceCode" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="basic-info-head mt20">产品信息</div>

            <el-table :data="state.submitData.children" row-key="id" default-expand-all>
                <el-table-column v-for="col in columnsData" :label="col.name" :prop="col.prop || 'picUrl'"
                    :fixed="col.fixed ? col.fixed : false" :min-width="col.width ? col.width : '140'"
                    :sortable="col.sortable" show-overflow-tooltip>
                    <template #default="{ row, $index }" v-if="col.name == '图片'">
                        <div class="list-image">
                            <ewt-image :url="row.picUrl" @click="showImageView(row.picUrl)"
                                style="width: 36px; height: 36px; object-fit: contain; display: block" />
                            <div class="tag-combination" v-if="row.skuType === '2'">组</div>
                        </div>
                    </template>

                    <template #default="{ row }" v-if="col.name == 'MSKU/FNSKU'">
                        <div style="width: 140px">
                            <p>{{ row.msku || '-' }}
                                <SvgIcon name="ele-CopyDocument" :size="12" class="copy_btn show_hover ml5"
                                    @click="copyText(row.msku)" />
                            </p>
                            <p>{{ row.fnsku || '-' }}</p>

                        </div>
                    </template>
                    <template #default="{ row }" v-if="col.name == '品名/SKU'">
                        <NameAndSku :data="row" :dialogRef="SkuDetailDialogRef" />
                    </template>
                    <template #default="{ row }" v-if="col.name == '外箱尺寸(cm)'">
                        <div style="width: 140px">
                            {{ row.specBoxLength }} x {{ row.specBoxWidth }} x {{ row.specBoxHeight }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="basic-info-head mt20">装箱信息</div>
            <el-table :data="state.submitData.deliveryPackItemList">
                <el-table-column label="图片" width="80">
                    <template #default="{ row }">
                        <div class="list-image">
                            <ewt-image :url="row.picUrl"
                                style="width: 36px; height: 36px; object-fit: contain; display: block" />
                            <div class="tag-combination" v-if="row.skuType === '2'">组</div>
                            <div class="JI ml5" v-if="row.urgencyFlag == 1">急</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="品名/SKU" width="160">
                    <template #default="{ row }">
                        <NameAndSku :data="row" />
                    </template>
                </el-table-column>
                <el-table-column label="MSKU/FNSKU" width="160">
                    <template #default="{ row }">
                        <p>{{ row.mskuCode || '-' }}</p>
                        <p>{{ row.fnsku || '-' }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="发货量" prop="deliveryTotal" width="120"> </el-table-column>
                <el-table-column label="总净重（kg）" width="160" prop="netWeightTotal"> </el-table-column>
                <el-table-column label="总体积CBM" prop="volumeTotal" width="120"> </el-table-column>
                <el-table-column label="箱数" prop="boxNum"> </el-table-column>
                <el-table-column label="已装箱商品数量" width="160" prop="inBoxSkuNum"> </el-table-column>
                <el-table-column v-for="(i, index) in parseInt(state.submitData.boxNumSum || 0)" :label="`箱号${index + 1}`">
                    <template #default="{ row }">
                        {{ row.boxInfoList?.[index] }}
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click="state.visible = false">取消</el-button>
                <el-button type="primary" class="ml10" @click="confirm">确认合并</el-button>
            </template>
        </el-dialog>
        <SkuDetailDialog ref="SkuDetailDialogRef" />
    </div>
</template>

<script lang="ts" name="apportionmentDialog" setup>
import request from '/@/utils/request';

const emit = defineEmits(['change'])
const dialogRef = ref()
const SkuDetailDialogRef = ref()

const rules = ref({
    
    expectedInDate: [{ required: true, message: '预计到货日期必填', trigger: 'change' }],
    
});

const busTypeList = {
    1: '其他入库',
    2: '盘盈入库',
    3: '销退入库',
    4: '库存调整',
    6: '调拨入库'
}

const props = defineProps({
    apportionIdList: {
        type: Array,
        default: []
    }
})

const feeType = [
    {
        label: '运输费用',
        value: '1'
    },
    {
        label: '关税',
        value: '2'
    },
    {
        label: '其他费用',
        value: '3'
    },
]

const columnsData = [
    {
        name: '图片',
        prop: 'picUrl',
        fixed: 'left',
        isShow: true,
        defaultChecked: true,
        width: '100',
    },
    {
        name: '品名/SKU',
        isShow: true,
        defaultChecked: true,
        width: '180',
    },
    {
        name: 'MSKU/FNSKU',
        isShow: false,
        width: '180',
    },
    {
        name: '三方仓SKU',
        isShow: false,
        prop: 'tripartiteSkuCode',
        width: '180',
    },
    {
        name: '三方仓下单量',
        prop: 'deliveryNum',
        isShow: false,
        width: '140',
    },
    {
        name: '单位',
        prop: 'skuUnit',
        isShow: true,
        defaultChecked: true,
    },
    {
        name: '单箱数量',
        prop: 'boxPcs',
        isShow: true,
        defaultChecked: true,
    },
    {
        name: '单箱毛重(kg)',
        prop: 'singlePackWeightSum',
        isShow: true,
        defaultChecked: true,
    },
    {
        name: '外箱尺寸(cm)',
        isShow: true,
        defaultChecked: true,
    },
]



const state = reactive({
    visible: false,
    showResult: false,
    tmsDeliveryExpenseItemList: [],
    tableResult: [],
    mergeList: [],
    submitData: {},
    tranList: []
})

const mergeOrderList = (data?: object) => {
    return request({
        url: '/wms/tripartiteInboundOrder/mergeOrder',
        method: 'POST',
        data
    });
}

import { ElMessage } from 'element-plus';

const formRef = ref()

const confirm = async() => {
    const valid = await formRef.value.validate().catch(() => {});

	if (!valid) return false;

    let params = state.submitData
    mergeOrderList(params).then(res => {
        if (res.code == 0) {
            ElMessage({
                message: res.msg || '已成功合并！',
                type: 'success',
            });
            emit('change')
            state.visible = false
        }
    })
}

onMounted(async () => {
});

const preMerge = (data?: object) => {
    return request({
        url: '/wms/tripartiteInboundOrder/preMerge',
        method: 'POST',
        data
    });
}

// 打开弹窗
const openDialog = async (rows) => {
    state.visible = true
    state.mergeList = rows
    preMerge(rows.map(i => i.id)).then(res => {
        state.submitData = res.data
    })
    fetchTrans()
};

const getTransWay = (params?: object) => {
    return request({
        url: '/admin/sysLogisticsDict/items',
        method: 'get',
        params
    });
}

// 物流相关
const fetchTrans = async () => {
    getTransWay().then(res => {
        state.tranList = res.data

    })
}

defineExpose({
    openDialog
})

</script>

<style lang="scss" scoped>
.headerLine {
    >div {
        display: flex;

        >div {
            margin-right: 30px;
            display: flex;
            align-items: center;
            height: 32px;

            &:nth-child(1) {
                width: 220px;
            }

            &:nth-child(2) {
                width: 240px;
            }

            &:nth-child(3) {
                width: 240px;
            }

            &:nth-child(4) {
                width: 260px;
            }

            &:nth-child(5) {
                width: 220px;
            }

            &:nth-child(6) {
                width: 260px;
            }
        }
    }

}

.basic-info-head {
    position: relative;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: #0b1019;
    padding-left: 10px;
    margin-bottom: 20px;
    display: flex;

    &:before {
        content: ' ';
        display: inline-block;
        position: absolute;
        top: 5px;
        left: 0;
        height: 14px;
        width: 2px;
        background: #005bf5;
    }
}

.footerHandle {
    display: flex;
    flex-direction: row-reverse;
}
</style>